<template lang="html">
    <div class="train-count">
        <nav-header>
        <template slot="menuBefore">
            <li>
            <router-link to="/teaching/train/train-list">培训列表</router-link>
            </li>
            <li class="gap">&gt;</li>        
        </template>
        <li>统计</li>
        </nav-header>
        <div class="zh-table">
        <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
                        <div class="open-width">
                            <el-input v-model="keyword" placeholder="用户名 地区名" @keyup.enter.native="searchList"></el-input>
                        </div>
                        <el-button type="primary" @click="searchList">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
            <span class="count-num">
                总人数：{{total_number}}人
            </span>
                    </div>
                    <div class="zh-open-right fr">
                        <el-button type="primary" @click="exportExcel">导出Excel</el-button>
                    </div>
                </div>
        <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <el-table
                        :data="listData"
                        border
                        max-height="600"
                        style="width: 100%">
                        <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                width="56"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="name"
                        label="参与人"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="number"
                        label="账号"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                prop="position_name"
                label="地区"
                align="center"
                width="230"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="school_name"
                label="学校"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="study_section_name"
                label="学段"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="subject_name"
                label="科目"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="study_score"
                label="获得学分"
                align="center"
                width="120"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="create_time"
                label="最后学习时间"
                align="center"
                width="200"
                show-overflow-tooltip
                >
                </el-table-column>
                    </el-table>
                    <div class="table-pagination" v-show="total_number > 10">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page_index"
                            :page-size="listParam.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
    export default {
    name: 'train-count',
    data() {
        return {
        loading:{
                status:false,
                txt:'获取数据...'
            },
        listData: [],
        listParam: {
            is_export: 1,/*是否导出*/
            train_id: this.$route.query.trainid,/*培训id */
            keyword: '',/*关键词*/
            page_index: 1,/*第几页*/
            page_size: 10,/*多少条*/
            type: 1/*类型，是否分页 */
        },
        keyword: '',
        total_number: 0,/*总条数 */
        }
    },
    mounted() {

    },
    created(){
        this.getList()
    },
    methods: {
        getList() {
        this.loading.status = true;
        let params = this.listParam;
        const success = res => {
            this.loading.status = false;
            this.listData = res.data.data;
            this.total_number = parseInt(res.data.data_sum);
        }
        this.$ajax.get('api/Train/train_static_data',{params: params, func: {success: success}})
        },
        searchList() {
        this.listParam.keyword = this.keyword;
        this.listParam.page_index = 1;
        this.getList();
        },
        reset() {
        this.keyword = '';
        this.listParam = {
            is_export: 1,/*是否导出*/
            train_id: this.$route.query.trainid,/*培训id */
            keyword: '',/*关键词*/
            page_index: 1,/*第几页*/
            page_size: 10,/*多少条*/
            type: 1/*类型，是否分页 */
        }
        this.getList();
        },
        handleSizeChange(size) {
            this.listParam.page_size = size;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listParam.page_index = val;
            this.getList();
        },
        exportExcel() {
            let url = this.BASE_URL + '/index/resource/input_train_static_excel';
            let form = document.createElement("form");
            let ipt = document.createElement("input");
            let keyWord = document.createElement("input");
            ipt.setAttribute('type', 'hidden');
            ipt.setAttribute('name', 'train_id');
            ipt.setAttribute('value', this.$route.query.trainid);
            keyWord.setAttribute('type', 'hidden');
            keyWord.setAttribute('name', 'keyword');
            keyWord.setAttribute('value', this.listParam.keyword);
            form.appendChild(ipt);
            form.appendChild(keyWord);
            form.style.display = "none";
            form.action = url;
            form.method = 'get';
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        },
        back() {
            this.$router.go('-1');
        }
    },
    }
</script>

<style lang="scss">
    .train-count {
    .zh-open-left {
        overflow: hidden;
        .count-num {
        display: inline-block;
        height: 38px;
        line-height: 50px;
        margin-left: 15px;
        color: #7b7b7b;
        }
    }
    .pagination-button {
        position: absolute;
        right: 0;
    }
    .count-refresh {
        bottom: 15px;
    }
    .zh-table-contents {
        position: relative;
    }
    }
</style>
